<template>
  <div class="equipment-repair-form">
    <div class="header-actions">
      <router-link to="/main/xingzheng/gudingzichan">
        <el-button type="primary">返回</el-button>
      </router-link>
      <el-button style="margin-left: 10px" type="primary" @click="goToList"
        >列表</el-button
      >
      <!-- 添加导出 PDF 按钮 -->
      <el-button style="margin-left: 10px" type="primary" @click="exportToPDF"
        >导出 PDF</el-button
      >
    </div>
    <div class="pdf">
      <h2 class="company-name">AIMSP 深圳市爱美思普科技有限公司</h2>
      <h2 class="form-title">设备维修申请单</h2>
      <p class="form-info">
        <span>
          申请单位：<input
            v-model="formData.applicationUnit"
            :disabled="isView"
          />
        </span>
        <span>
          申请日期：
          <input
            v-model="formData.applicationYear"
            type="number"
            style="width: 80px"
            :disabled="isView"
          />
          年
          <input
            v-model="formData.applicationMonth"
            type="number"
            style="width: 60px"
            :disabled="isView"
          />
          月
          <input
            v-model="formData.applicationDay"
            type="number"
            style="width: 60px"
            :disabled="isView"
          />
          日
        </span>
      </p>
      <table class="form-table" border="1">
        <tr>
          <td>设备名称、规格</td>
          <td>
            <input v-model="formData.equipmentNameSpec" :disabled="isView" />
          </td>
          <td>设备编号</td>
          <td><input v-model="formData.equipmentCode" :disabled="isView" /></td>
        </tr>
        <tr>
          <td>维修时间</td>
          <td><input v-model="formData.repairTime" :disabled="isView" /></td>
          <td>验收合格时间</td>
          <td>
            <input v-model="formData.acceptanceTime" :disabled="isView" />
          </td>
        </tr>
        <tr>
          <td rowspan="2">维修原因</td>
          <td rowspan="2">
            <textarea
              v-model="formData.repairReason"
              style="width: 100%; height: 100px"
              :disabled="isView"
            ></textarea>
          </td>
          <td>申请人</td>
          <td>主管</td>
        </tr>
        <tr>
          <td><input v-model="formData.applicant" :disabled="isView" /></td>
          <td><input v-model="formData.supervisor" :disabled="isView" /></td>
        </tr>
        <tr>
          <td rowspan="2">维修记录</td>
          <td rowspan="2">
            <textarea
              v-model="formData.repairRecords"
              style="width: 100%; height: 100px"
              :disabled="isView"
            ></textarea>
          </td>
          <td>维修人</td>
          <td>主管</td>
        </tr>
        <tr>
          <td><input v-model="formData.repairPerson" :disabled="isView" /></td>
          <td>
            <input v-model="formData.supervisorRepair" :disabled="isView" />
          </td>
        </tr>
        <tr>
          <td rowspan="3">外修</td>
          <td rowspan="3">
            <textarea
              v-model="formData.outsideRepairDetails"
              style="width: 100%; height: 100px"
              :disabled="isView"
            ></textarea>
          </td>
          <td>申请人</td>
          <td>
            <input v-model="formData.applicantOutside" :disabled="isView" />
          </td>
        </tr>
        <tr>
          <td>经理</td>
          <td><input v-model="formData.manager" :disabled="isView" /></td>
        </tr>
        <tr>
          <td>核准</td>
          <td><input v-model="formData.approver" :disabled="isView" /></td>
        </tr>
        <tr>
          <td>采购核价</td>
          <td>
            <textarea
              v-model="formData.purchaseVerification"
              style="width: 100%; height: 100px"
              :disabled="isView"
            ></textarea>
          </td>
          <td>采购确认</td>
          <td>
            <input v-model="formData.purchaseConfirmation" :disabled="isView" />
          </td>
        </tr>
        <tr>
          <td rowspan="2">总经理审核</td>
          <td rowspan="2">
            <textarea
              v-model="formData.gmReview"
              style="width: 100%; height: 100px"
              :disabled="isView"
            ></textarea>
          </td>
          <td rowspan="2">总经理</td>
          <td rowspan="2">
            <input v-model="formData.generalManager" :disabled="isView" />
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td rowspan="2">验收</td>
          <td>
            <textarea
              v-model="formData.acceptanceDetails"
              style="width: 100%; height: 100px"
              :disabled="isView"
            ></textarea>
          </td>
          <td>确认</td>
          <td><input v-model="formData.confirmation" :disabled="isView" /></td>
        </tr>
      </table>
      <p class="save-period">保存期限：长期</p>
    </div>
    <button @click="saveData" v-if="!isView" class="save-button">保存</button>
  </div>
</template>

<script>
import {
  saveEquipmentRepair,
  getEquipmentRepairDetail,
} from "@/api/equipmentRepair";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

export default {
  data() {
    return {
      isView: false,
      formData: {
        id: null,
        applicationUnit: "",
        applicationYear: "",
        applicationMonth: "",
        applicationDay: "",
        equipmentNameSpec: "",
        equipmentCode: "",
        repairTime: "",
        acceptanceTime: "",
        repairReason: "",
        applicant: "",
        supervisor: "",
        repairRecords: "",
        repairPerson: "",
        supervisorRepair: "",
        outsideRepairDetails: "",
        applicantOutside: "",
        manager: "",
        approver: "",
        purchaseVerification: "",
        purchaseConfirmation: "",
        gmReview: "",
        generalManager: "",
        confirmation: "",
        acceptanceDetails: "",
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    const type = this.$route.query.type;
    this.isView = type === "view";
    if (id) {
      this.getDetail(id);
    }
  },
  methods: {
    async getDetail(id) {
      try {
        const response = await getEquipmentRepairDetail(id);
        if (response.data) {
          const data = response.data;
          this.formData = {
            ...this.formData,
            ...data,
            applicationYear: data.applicationYear || "",
            applicationMonth: data.applicationMonth || "",
            applicationDay: data.applicationDay || "",
          };
        }
      } catch (error) {
        this.$message.error("获取详情失败");
      }
    },
    async saveData() {
      try {
        const success = await saveEquipmentRepair(this.formData);
        if (success) {
          this.$message.success(this.formData.id ? "更新成功" : "保存成功");
          this.goToList();
        } else {
          this.$message.error(this.formData.id ? "更新失败" : "保存失败");
        }
      } catch (error) {
        this.$message.error("操作失败");
        console.error("保存失败", error);
      }
    },
    goToList() {
      this.$router.push("/main/xingzheng/sbweixiusq/sbweixiusqList");
    },
    // 导出 PDF 方法
    async exportToPDF() {
      const element = document.querySelector(".pdf");
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF("p", "mm", "a4");
      const imgProps = pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
      pdf.save("设备维修申请单.pdf");
    },
  },
};
</script>

<style scoped>
.equipment-repair-form {
  font-family: "宋体", sans-serif;
  padding: 20px;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header-actions {
  display: flex;
}

.pdf {
  padding: 20px;
}

.company-name {
  font-size: 1.2em;
  text-align: center;
}

.form-title {
  font-size: 1.2em;
  text-align: center;
  margin-top: -10px;
  margin-bottom: 10px;
}

.form-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  white-space: nowrap;
}

.form-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.form-table th,
.form-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
}

input,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

input[disabled],
textarea[disabled] {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

.save-period {
  margin-bottom: 20px;
}

.save-button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-button:hover {
  background-color: #3a8ee6;
}
</style>